<template>
  <el-select
    v-model="obj"
    :placeholder="placeholder"
    :value-key="valueKey"
    :disabled="disabled"
    :filterable="filterable"
    clearable
    @change="setValue"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :value="item"
      :label="getLabel(item)"
    />
  </el-select>
</template>

<script>
import { postHandle } from '@/api'
export default {
  name: 'WiseSelect',
  props: {
    value: {
      type: [String, Object],
      default: ''
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    params: {
      type: Object
    },
    url: {
      type: String,
      default: ''
    },
    dataDic: {
      type: String
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    filters: {
      type: [Array]
    },
    filtersObj: {
      type: Object
    },
    objKeys: {
      type: [Array]
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    object: {
      type: Object
    },
    objParams: {
      type: Object
    }
  },
  data() {
    return {
      obj: null,
      options: []
    }
  },
  watch: {
    value(val) {
      this.obj = val
    }
  },
  mounted() {
    this.getOptions()
    if (this.objParams) {
      this.$watch('object.' + this.objParams.value, (newVal, oldVal) => {
        this.getOptions()
      })
    }
    if (this.filters && this.filters.length > 0) {
      this.filters.forEach((item) => {
        this.$watch('object.' + item.romteKey, (newVal, oldVal) => {
          item.value = newVal
          this.getOptions()
        })
      })
    }
  },
  methods: {
    getLabel(object) {
      if (this.labelKey) {
        let arr = this.labelKey.split('.')
        let s = this.getObjValue(object, arr)
        return s
      }
      return ''
    },
    getObjValue(obj, keys) {
      if (typeof obj[keys[0]] === 'object') {
        let o = obj[keys[0]]
        keys.splice(0, 1)
        return this.getObjValue(o, keys)
      } else {
        return obj[keys[0]]
      }
    },
    getOptions() {
      if (this.dataDic) {
        this.options = require('../data/dataDictionary')[this.dataDic]
      } else {
        this.getOptionsByUrl()
      }
    },
    getOptionsByUrl() {
      if (this.url) {
        if (this.filters && this.filters.length > 0) {
          let filter = this.filters.find((item) => item.romteKey)
          if (filter && !filter.value) {
            return false
          }
        }
        let obj = this.filtersObj
        
        if (this.objParams && this.object[this.objParams.value]) {
          obj[this.objParams.key] = this.object[this.objParams.value]
        }
        const params = {
          d: {
            filters: this.filters,
            page: {
              p: 1,
              ps: 9999
            }
          },
          obj: this.filtersObj
        }
        postHandle(this.url, params).then((response) => {
          this.options = response.result
        })
      }
    },
    setValue(value) {
      if (this.objKeys && this.objKeys.length > 0) {
        const arry = []
        this.objKeys.forEach((item) => {
          arry.push({
            field: item.field,
            value: value[item.key]
          })
        })
      
        this.$emit('on-value', arry)
      }
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>
</style>
